<template>
<ul id="demo" class="tree">
  <item
    class="item"
    :model="treeData">
  </item>
</ul>
</template>

<script>
  export default {
    name: "shu",
    data(){
      return {
        treeData:{
          name: 'My Tree',
          children: [
            { name: 'hello' },
            { name: 'wat' },
            {
              name: 'child folder',
              children: [
                {
                  name: 'child folder',
                  children: [
                    { name: 'hello' },
                    { name: 'wat' }
                  ]
                },
                { name: 'hello' },
                { name: 'wat' },
                {
                  name: 'child folder',
                  children: [
                    { name: 'hello' },
                    { name: 'wat' }
                  ]
                }
              ]
            }
          ]
        },
      }
    }
  }
</script>

<style scoped>
  .item {
    cursor: pointer;
  }
  .tree {
    padding-left: 20px;
  }
</style>
